// Simple client-side routing for demonstration
document.addEventListener('DOMContentLoaded', () => {
  const contentElement = document.getElementById('page-content');
  const navLinks = document.querySelectorAll('.nav-link');
  const hashLinks = document.querySelectorAll('.hash-link');
  
  // Update page content based on current path
  function updateContent() {
    const path = window.location.pathname;
    
    switch(path) {
      case '/page1':
        contentElement.textContent = 'This is Page 1 content';
        break;
      case '/page2':
        contentElement.textContent = 'This is Page 2 content';
        break;
      case '/page3':
        contentElement.textContent = 'This is Page 3 content';
        break;
      default:
        contentElement.textContent = 'Welcome to the home page!';
    }
    
    // Highlight active link
    navLinks.forEach(link => {
      if (link.getAttribute('href') === path) {
        link.style.backgroundColor = '#007bff';
        link.style.color = 'white';
      } else {
        link.style.backgroundColor = '';
        link.style.color = '';
      }
    });
  }
  
  // Update content based on hash
  function updateHashContent() {
    const hash = window.location.hash.slice(1) || '/home';
    const hashContentElement = document.getElementById('hash-content');
    
    if (!hashContentElement) {
      // Create hash content display area if it doesn't exist
      const newHashContent = document.createElement('div');
      newHashContent.id = 'hash-content';
      newHashContent.style.marginTop = '20px';
      newHashContent.style.padding = '15px';
      newHashContent.style.border = '1px solid #28a745';
      newHashContent.style.borderRadius = '4px';
      newHashContent.style.backgroundColor = '#f8fff8';
      document.body.appendChild(newHashContent);
    }
    
    const displayElement = document.getElementById('hash-content');
    
    switch(hash) {
      case '/home':
        displayElement.textContent = 'Hash: Home section loaded';
        break;
      case '/profile':
        displayElement.textContent = 'Hash: Profile section loaded';
        break;
      case '/settings':
        displayElement.textContent = 'Hash: Settings section loaded';
        break;
      case '/about':
        displayElement.textContent = 'Hash: About section loaded';
        break;
      default:
        displayElement.textContent = `Hash: ${hash} section loaded`;
    }
    
    // Highlight active hash link
    hashLinks.forEach(link => {
      const linkHash = link.getAttribute('href').slice(1);
      if (linkHash === hash) {
        link.style.backgroundColor = '#28a745';
        link.style.color = 'white';
      } else {
        link.style.backgroundColor = '';
        link.style.color = '';
      }
    });
  }
  
  // Handle navigation links
  navLinks.forEach(link => {
    link.addEventListener('click', (e) => {
      e.preventDefault();
      const href = link.getAttribute('href');
      
      // Update browser history
      window.history.pushState(null, '', href);
      
      // Update page content
      updateContent();
    });
  });
  
  // Handle hash navigation links
  hashLinks.forEach(link => {
    link.addEventListener('click', (e) => {
      e.preventDefault();
      const href = link.getAttribute('href');
      
      // Update hash
      window.location.hash = href;
    });
  });
  
  // Handle back/forward buttons
  window.addEventListener('popstate', updateContent);
  
  // Handle hash changes
  window.addEventListener('hashchange', updateHashContent);
  
  // Initial content update
  updateContent();
  updateHashContent();
});
